<template>
  <div class="dashboard-container"
       style="height:100%">
    <div class="block-img">
      <el-image :src="src"
                fit="cover"
                style="height: 100%" />
    </div>
    <el-row :gutter="12">
      <el-col :span="16">
        <el-card shadow="hover">
          <div id="dayChart"
               style="height:500px"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div id="yearChart"
               style="height:500px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as echarts from 'echarts';

export default {
  name: 'Dashboard',
  data () {
    return {
      src: require('@/img/home.png')
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted () {
    // 绘制销量图
    this.drawDayChart();
    this.drawYearChart();
  },
  methods: {
    drawDayChart () {
      var dom = document.getElementById("dayChart");
      var myChart = echarts.init(dom);

      var option;

      var dataAxis = [];
      var data = [];

      for (var i = 0; i < 12; i++) {
        dataAxis.push(i + "点")
        data.push(Math.ceil(Math.random() * 10) * 1000)
      }

      var yMax = 500;
      var dataShadow = [];

      for (var i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
      }

      option = {
        title: {
          text: '当日销量统计',
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            inside: true,
            textStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          z: 10
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#999'
            }
          }
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [
          {
            type: 'bar',
            showBackground: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#83bff6' },
                  { offset: 0.5, color: '#188df0' },
                  { offset: 1, color: '#188df0' }
                ]
              )
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#2378f7' },
                    { offset: 0.7, color: '#2378f7' },
                    { offset: 1, color: '#83bff6' }
                  ]
                )
              }
            },
            data: data
          }
        ]
      };

      // Enable data zoom when user click bar.
      var zoomSize = 6;
      myChart.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        myChart.dispatchAction({
          type: 'dataZoom',
          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        });
      });

      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
    },
    drawYearChart () {
      var chartDom = document.getElementById('yearChart');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '年销量统计',
          subtext: '数据来自实时统计'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['销量', '销售额']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['麻辣烫', '酸辣粉', '手抓饼', '面皮', '烤冷面', '总销量(份)']
        },
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
          },
          {
            name: '销售额',
            type: 'bar',
            data: [19325, 23438, 31000, 121594, 134141, 681807]
          }
        ]
      };

      option && myChart.setOption(option);
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.block-img {
  height: 300px;
  margin-bottom: 20px;
}
</style>
